import 'dart:ui';

import 'package:flutter/material.dart';

class MOodDiaryPage extends StatefulWidget {
  const MOodDiaryPage({super.key, required this.animationController});

  final AnimationController animationController;

  @override
  State<MOodDiaryPage> createState() => _MOodDiaryPageState();
}

class _MOodDiaryPageState extends State<MOodDiaryPage>
    with SingleTickerProviderStateMixin {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    //进入的时候先text title image ENTER
    //我们少了一个动画
    var slideInAnimation =
        Tween(begin: const Offset(1, 0), end: const Offset(0, 0))
            .chain(CurveTween(curve: const Interval(0.4, 0.6)))
            .animate(widget.animationController);
    var slideOutAnimation =
        Tween(begin: const Offset(0, 0), end: const Offset(-1, 0))
            .chain(CurveTween(curve: const Interval(0.6, 0.8)))
            .animate(widget.animationController);
    //chain,parent 实际上没有区别
    var titleInAnimation =
        Tween(begin: const Offset(1, 0), end: const Offset(0, 0))
            .chain(CurveTween(curve: Curves.easeInOut))
            .chain(CurveTween(curve: const Interval(0.4, 0.6)))
            .animate(widget.animationController);
    var titleAnimation =
        Tween(begin: const Offset(0, 0), end: const Offset(-1, 0))
            .chain(CurveTween(curve: Curves.easeInOut))
            .chain(CurveTween(curve: const Interval(0.6, 0.8)))
            .animate(widget.animationController);
    //原来text和image的交错，并不是interval合适offset不同
    var textAnimation =
        Tween(begin: const Offset(0, 0), end: const Offset(-3, 0))
            .chain(CurveTween(curve: Curves.easeInOut))
            .chain(CurveTween(curve: const Interval(0.6, 0.8)))
            .animate(widget.animationController);
    var textInAnimation =
        Tween(begin: const Offset(3, 0), end: const Offset(0, 0))
            .chain(CurveTween(curve: Curves.easeInOut))
            .chain(CurveTween(curve: const Interval(0.4, 0.6)))
            .animate(widget.animationController);
    var imageAnimation =
        Tween(begin: const Offset(0, 0), end: const Offset(-5, 0))
            .chain(CurveTween(curve: Curves.easeInOut))
            .chain(CurveTween(curve: const Interval(0.6, 0.8)))
            .animate(widget.animationController);
    var imageInAnimation =
        Tween(begin: const Offset(5, 0), end: const Offset(0, 0))
            .chain(CurveTween(curve: Curves.easeInOut))
            .chain(CurveTween(curve: const Interval(0.4, 0.6)))
            .animate(widget.animationController);
    return SlideTransition(
      position: slideInAnimation,
      child: SlideTransition(
        position: slideOutAnimation,
        child: Container(
          // padding: const EdgeInsets.symmetric(horizontal: 18.0),

          decoration:
              const BoxDecoration(color: Color.fromRGBO(245, 235, 226, 1)),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                color: Colors.red,
                width: 400,
                height: 200,
              ),
              SlideTransition(
                position: titleInAnimation,
                child: SlideTransition(
                  position: titleAnimation,
                  child: const Text(
                    "Mood Diary",
                    style: TextStyle(
                      fontSize: 24,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ),
              const SizedBox(
                height: 20,
              ),
              SlideTransition(
                position: textInAnimation,
                child: SlideTransition(
                  position: textAnimation,
                  child: const Text(
                    "Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore",
                    textAlign: TextAlign.center,
                  ),
                ),
              ),
              const SizedBox(height: 10),
              SlideTransition(
                position: imageInAnimation,
                child: SlideTransition(
                  position: imageAnimation,
                  child: Image.asset(
                      "assets/introduction_animation/mood_dairy_image.png",
                      fit: BoxFit.cover),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
